<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=QTja7zj4lH40ngF4sqNPaAKvzg32c37g">
        //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
    </script>
</head>

<body>
<div id="container"></div>
<script type="text/javascript">
    var map = new BMap.Map("container");
    // 创建地图实例
    var point = new BMap.Point(120.363192,30.312745);
    // 创建点坐标
    var opts = {};//创建一个控件对象
    map.centerAndZoom(point, 9);// 初始化地图，设置中心点坐标和地图级别
    var marker = new BMap.Marker(point);//创建标注
    var geoc = new BMap.Geocoder();//创建逆解析对象
   // map.addOverlay(marker);//方法addOverlay() 向地图中添加覆盖物
    map.enableScrollWheelZoom(true);//地图缩放
    map.enableDragging();//地图拖拽
    map.addControl(new BMap.NavigationControl(opts));//addControl()向地图添加控件 平移和缩放控件 PC端默认左上角 移动端默认右下角且只有缩放功能
    map.addControl(new BMap.ScaleControl(opts));//比例尺控件 默认左下角
    map.addControl(new BMap.OverviewMapControl(opts));//缩略图控件 默认右下角且呈可折叠状态（点击隐藏和显示）
    map.addControl(new BMap.MapTypeControl());//地图类型控件 默认右上角可切换地图/卫星/三维三种状态
    map.addControl(new BMap.GeolocationControl(opts));//定位控件 默认左下角
    map.addEventListener("click", function(e){
        var pt = e.point;
        geoc.getLocation(pt, function(rs){
            var addComp = rs.addressComponents;
            alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
        });
    });
    //根据自己的位置定位
    // var geolocation = new BMap.Geolocation();
    // geolocation.getCurrentPosition(function(r){
    //     if(this.getStatus() == BMAP_STATUS_SUCCESS){
    //         var mk = new BMap.Marker(r.point);
    //        map.addOverlay(mk);
    //         map.panTo(r.point);
    //        // alert('您的位置：'+r.point.lng+','+r.point.lat);
    //     }
    //     else {
    //         alert('failed'+this.getStatus());
    //     }
    // },{enableHighAccuracy: true})
</script>
</body>
</html>